<template>
  <div class="swiper" :style="bg">
    <BannerOne v-show="0==getCurrent"></BannerOne>
    <BannerTwo v-show="1==getCurrent"></BannerTwo>
    <BannerThree v-show="2==getCurrent"></BannerThree>

    <div class="pre" v-show="getCurrent != 0" @click="pre">
      <img src="~img/common/btn_prev.png" alt="图片加载失败" />
    </div>
    <div class="next" v-show="getCurrent != 2" @click="next">
      <img src="~img/common/btn_next.png" alt="图片加载失败" />
    </div>
  </div>
</template>
 
<script>
import BannerOne from "./BannerOne";
import BannerTwo from "./BannerTwo";
import BannerThree from "./BannerThree";
// vuex混入
import {mapMutations} from "vuex"
export default {
  name: "Swiper",
  data() {
    return {
      bglist: [
        {},
        { background: "rgba(6, 169, 208, 0.65)" },
        { background: "rgba(169, 0, 255, 0.65)" }
      ]
    };
  },
  components: {
    BannerOne,
    BannerTwo,
    BannerThree
  },
  computed: {
    bg() {
      return this.bglist[this.getCurrent];
    },
    getCurrent(){
      return this.$store.state.current
    }
  },
  methods: {
    ...mapMutations(['next','pre'])
  }
};
</script>

<style scoped>
.swiper {
  /* background: rgba(0, 255, 0, 0.3); */
  min-width: 1024px;
  min-height: 500px;
  width: 100%;
  height: 100vh;
  z-index: -1;
  position: absolute;
  position: relative;
}




.swiper .pre,
.swiper .next {
  cursor: pointer;
}
.swiper .pre {
  position: fixed;
  top: 52.5%;
  left: 5rem;
  transform: translateY(-50%);
  height: 47px;
  width: 26px;
}
.swiper .next {
  position: fixed;
  top: 52.5%;
  right: 5rem;
  transform: translateY(-50%);
  height: 47px;
  width: 26px;
}
.swiper .pre > img,
.swiper .next img {
  width: 100%;
  height: 100%;
}
</style>